<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>身份管理</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">

	</head>
	<!--引入layui的js  -->
	<script src="./layui/layui.js" charset="utf-8"></script>
	<!--引入jquery的js  -->
	<script src="./js/jquery-2.1.1.min.js" charset="utf-8"></script>
	
	<body>
	
	<!-- 查询条件输入框 -->
	 <div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
		<div class="layui-form-item">
			<label class="layui-form-mid">卡号:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="card" name="card" autocomplete="off" class="layui-input" placeholder="请输入卡号">
			</div>
			<label class="layui-form-mid">所在资源室:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="resnamety" name="resname">
					<option value="">请选择</option>
					
				</select>
			</div>
			
			<label class="layui-form-mid">时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="intime" name="intime" autocomplete="off" class="layui-input" placeholder="请输入开始时间">
			</div>
			<label class="layui-form-mid">——</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="outtime" name="outtime" autocomplete="off" class="layui-input" placeholder="请输入结束时间">
			</div>
			
			</div>
			<div class="layui-form-item">
			<label class="layui-form-mid">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="statety" name="statename">
					<option value="">请选择</option>
					
				</select>
			</div>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div> 


	<!-- 修改的弹层页面  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">

			<div class="layui-form-item">

				<label class="layui-form-label">图书名称:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input" placeholder="请输入图书名称">
				<input type="hidden" id="id" name="id" class="layui-input">
			</div>
			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">所在资源室:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="resnamety1" name="resname">
					
				</select>
			</div>
			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="statety1" name="statename">
					
				</select>
			</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
			</div>
		</form>
	</div>


	<!-- 新增的弹层页面  -->
	<div id="addLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="addForm" id="addForm"
			action="">
			
			<div class="layui-form-item">

				<label class="layui-form-label">图书名称:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input" placeholder="请输入姓名">
			</div>
			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">所在资源室:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="resnamety2" name="resname">
					<option value="">请选择</option>
				</select>
			</div>
			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  id="statety2" name="statename">
					<option value="">请选择</option>
				</select>
			</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="addSubmit" lay-submit="">新增提交</button>
			</div>
		</form>
	</div>


	<!-- 查看的弹层页面  -->
	<div id="detailLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="detailForm" id="detailForm"
			action="">
			<div class="layui-inline">
				<div class="layui-form-item">
					<label class="layui-form-label">产品名称:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" id="pName" name="pName" class="layui-input" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生产厂家:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" id="factory" name="factory" class="layui-input" disabled="disabled">
					</div>
				</div>
			</div>
		</form>
	</div>

	<!-- 图片上传的弹层页面  -->
	<div id="imgUploadLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="imgForm" id="imgForm"
			action="">
			<input type="hidden" id="id" name="id" class="layui-input">
			<input type="hidden" id="image" name="image" class="layui-input">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			  <legend>产品图片上传，上传完后记得提交哦</legend>
			</fieldset>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="maintu">主图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 300px;height:200px" />
			    <p id="demoText1"></p>
			  </div>
			</div>
			
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="imgSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>



		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	   <!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
        	

	</script>
		
		<!--表格工具栏的新增、批量等按钮  -->
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
  		</div>
		</script>

		
		

		<script>
			layui.use(['laydate','layer','form','table','tree','upload'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table;	//表格组件
					
					//日期控件
					laydate.render({
						elem: '#beginTime'
					});
					laydate.render({
						elem: '#endTime'
					});
					
					//获取分类，填充下拉选框的数据
					$(function() {
						$.ajax({
							type: 'get',				//提交方式 get或者post
							url: 'findebootsresroom.do',					//提交url
							datatype: 'json', 			//返回数据的格式
							success: function(data) {	//成功返回之后的调用
								$.each(data, function(index, item) {
									//填充下拉列表
									$('#resnamety').append(new Option(item.name, item.id)); 
								});
								layui.form.render("select");
							},
							error: function() {
								alert("获取失败！！！")
							}
						});
					})

					//获取分类，填充下拉选框的数据
					$(function() {
						$.ajax({
							type: 'get',				//提交方式 get或者post
							url: 'findstatetype1.do',					//提交url
							datatype: 'json', 			//返回数据的格式
							success: function(data) {	//成功返回之后的调用
								$.each(data, function(index, item) {
									//填充下拉列表
									$('#statety').append(new Option(item.name, item.id)); 
								});
								layui.form.render("select");
							},
							error: function() {
								alert("获取失败！！！")
							}
						});
					})
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					url: 'findeAllLogtab.do',					//提交到后台的地址
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '身份管理', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
						},{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 100,		//单元格宽度（可选）	
							title: '编号',	//表头名称			（必需有）
						},{
							field: 'card',	//对应实体类里的属性
							width: 150,		//单元格宽度	
							title: '卡号'		//表头名称
						},{
							field: 'intime',
							width: 180,
							title: '进入时间'
						},{
							field: 'outtime',
							width: 180,
							title: '离开时间'
						},{
							field: 'resname',
							width: 150,
							title: '所在资源室',
							
						},{
							field: 'statename',
							width: 180,
							title: '状态'
						}]
					]
				});

			  // 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		      form.on('switch(isLockSwitch)', function (data) {
		          var id = $(this).attr('data-id');			//获得当前点击对象的id值
		          var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		          var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		          layer.open({
		              content: '确定要修改状态吗？'				//给用户的友好提示
		              ,btn: ['确定', '取消']
		              ,yes: function(index, layero){
		                  data.elem.checked=x;
		                  layer.close(index);
		                  $.ajax({
		                      type : "POST",
		                      url : "",
		                      data : {"id" : id , "valid" : valid},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("修改成功！");
		                          }else{
		                              layer.msg("修改失败！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		              }
		              ,btn2: function(index, layero){
		                  //按钮【按钮二】的回调
		                  data.elem.checked=!x;
		                  form.render();
		                  layer.close(index);
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		              ,cancel: function(){
		                  //右上角关闭回调
		                  data.elem.checked=!x;
		                  form.render();
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		          });
		          form.render();
		          return false;
		      });
				
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				    	//新增按钮
				      case 'add':
				    	

							

				    		//清空新增页面的表单内容，防止上次输入的数据还在
							$("#addForm")[0].reset();	
						 	//打开新增的弹层
							layer.open({
								type:1, 
								title: '您正在新增产品信息',
								content: $('#addLayer'),
								area: ['800px','600px']
							});
							
							//获取分类，填充下拉选框的数据
							$(function() {
								$.ajax({
									type: 'get',				//提交方式 get或者post
									url: 'findebootsresroom.do',					//提交url
									datatype: 'json', 			//返回数据的格式
									success: function(data) {	//成功返回之后的调用
										$.each(data, function(index, item) {
											//填充下拉列表
											$('#resnamety2').append(new Option(item.name, item.id)); 
										});
										layui.form.render("select");
									},
									error: function() {
										alert("获取失败！！！")
									}
								});
							})
							//获取分类，填充下拉选框的数据
							$(function() {
								$.ajax({
									type: 'get',				//提交方式 get或者post
									url: 'findstatetype1.do',					//提交url
									datatype: 'json', 			//返回数据的格式
									success: function(data) {	//成功返回之后的调用
										$.each(data, function(index, item) {
											//填充下拉列表
											$('#statety2').append(new Option(item.name, item.id)); 
										});
										layui.form.render("select");
									},
									error: function() {
										alert("获取失败！！！")
									}
								});
							})
				      break;
				      	//批量删除按钮
				      case 'delAll':
				    		//获取选中的数据
			                var checkStatus = table.checkStatus('proTable');
			                var ids = [];
			                for(var i=0; i<checkStatus.data.length; i++){
			                	ids.push(checkStatus.data[i].mtid)
			                }
			                if(ids.length == 0){
			                	alert("请选择需要删除的产品");
			                	return;
			                }
			                //拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
			                var id = ids.join(',');
			                if(confirm("确定全部删除吗？")){
			                	$.ajax({
									type: 'post', 		//提交方式get或post
									url: 'deleLogtab.do', 			//提交路径
									data: {'ids':id}, 	//参数
									dataType: 'json', 	//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);
										table.reload('proTable'); 
									},
									error: function() { 			//提交失败
										alert("系统异常！！")
									}
								}); 
			                }
				    	  
				      	break;
				    };
				  });
				
			  	//数据表格里的事件监听
				table.on('tool(filterTable)',function(obj){
					var data = obj.data;//获取当前行的数据
					
					switch(obj.event){
				      case 'edit':		//修改操作
				    	//获取分类，填充下拉选框的数据
							$(function() {
								$.ajax({
									type: 'get',				//提交方式 get或者post
									url: 'findebootsresroom.do',					//提交url
									datatype: 'json', 			//返回数据的格式
									success: function(data) {	//成功返回之后的调用
										$.each(data, function(index, item) {
											//填充下拉列表
											$('#resnamety1').append(new Option(item.name, item.id)); 
										});
										layui.form.render("select");
									},
									error: function() {
										alert("获取失败！！！")
									}
								});
							})

							//获取分类，填充下拉选框的数据
							$(function() {
								$.ajax({
									type: 'get',				//提交方式 get或者post
									url: 'findstatetype1.do',					//提交url
									datatype: 'json', 			//返回数据的格式
									success: function(data) {	//成功返回之后的调用
										$.each(data, function(index, item) {
											//填充下拉列表
											$('#statety1').append(new Option(item.name, item.id)); 
										});
										layui.form.render("select");
									},
									error: function() {
										alert("获取失败！！！")
									}
								});
							})
				    		//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在修改编号【'+ data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px','600px']
							});
				    	  
				      break;
				      case 'detail':		//查看操作
				    		//数据的回显
							form.val("detailForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在查看编号【'+ data.id + '】的信息',
								content: $('#detailLayer'),
								area: ['800px','600px']
							});
			      	  break;
				      case 'del':		//删除操作
				    		if(confirm("确定删除吗？")){
				    			$.ajax({
									type: 'post', 					//提交方式get或post
									url: 'deleLogtab.do',	 					//提交路径
									data: {"ids":data.id}, 			//参数
									dataType: 'json', 				//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);		//提示信息
										table.reload('proTable'); 	// 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								}); 
				    		}
				      
				      
				      
			      	  break;
				      case 'editImg':		//图片管理操作
				    		//数据的回显
							form.val("imgForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在操作编号【'+ data.id + '】的图片信息',
								content: $('#imgUploadLayer'),
								area: ['700px','600px']
							});
				    	  
				      break;
			    	};
				})
				
				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: 'edtiLogtab.do', 						//提交路径
						data: $("#editForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
			  	
				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: 'addLogtab.do',	 					//提交路径
						data: $("#addForm").serialize(), //参数
						dataType: 'json', 				//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	// 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					
					return false;
				});
				
				
				
				//主图片上传
		        var uploadInst1 = upload.render({
		            elem: '#maintu'
		            ,url: 'uploadImg.do'
		            ,accept:'images'
		            ,size:50000
		            ,before: function(obj){
		            	//预读本地文件
		                obj.preview(function(index, file, result){
		                    $('#demo1').attr('src', result);
		                });
		            }
		            ,done: function(res){
		                //如果上传失败
		                if(res.code > 0){
		                    return layer.msg('上传失败');
		                }
		                
		                //上传成功
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		                //图片url填写
		                var fileupload = $("#image");
		                fileupload.attr("value",res.data);
		            }
		            ,error: function(){
		                //演示失败状态，并实现重传
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		                demoText.find('.demo-reload').on('click', function(){
		                    uploadInst1.upload();
		                });
		            }
		        });
		     
		        //图片上传的提交按钮
				form.on('submit(imgSubmit)', function(data) {
					console.log($("#imgForm").serialize());
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: 'updateMembertypeImg.do', 						//提交路径
						data: $("#imgForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
				
				
			});
			
			
		</script>
		
	</body>

</html>
